setClass Method |
This method makes it possible to emphasize a tree item. This method sets an extra style class on the label of a treeItem.
Syntax
root.setClass( sClass );ortreeItem.setClass( sClass );
Parameters
sClass |
Required, string. Name of the style class. |
Remarks
Style classes with basic rules are allowed. For example, background-color, font, color, and border. Rules that influence positioning should not be used.
Example
The following example shows how the above method is used.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<title>setClass example</title>
<script src="/cordys/wcp/application.js"></script>
</head>
<script type="cordys/xml" id="menuData" >
<menu>
<Continent>
<caption>Asia</caption>
<Country>
<caption>India</caption>
<description>India is my Country</description>
</Country>
<Country>
<caption>Japan</caption>
<description>Japan popular for electronic trends</description>
</Country>
</Continent>
<Continent>
<caption>Europe</caption>
<description>Europe</description>
<Country>
<caption>The Netherlands</caption>
<description>The Netherlands</description>
</Country>
<Country>
<caption>UK</caption>
<description>UK</description>
</Country>
</Continent>
</menu>
</script>
<script type="cordys/xml" xmlns="" id="MenuTreeSchema" >
<TreeSchema>
<searchPath>//menu/</searchPath>
<Root>
<description>Continents</description>
</Root>
<TreeItem id="ContinentID">
<searchPath>Continent</searchPath>
<description>caption</description>
</TreeItem>
<TreeItem id="CountryID">
<searchPath>Country</searchPath>
<description>caption</description>
</TreeItem>
</TreeSchema>
</script>
<style>
.emphasize
{
border:2px dashed blue;
background-color:red;
color:white;
font-weight:bold;
}
</style>
<script type="text/javascript">
function handleCheck(treeItem)
{
var label = cordys.getTextContent(treeItem.getLabel());
var chk = treeItem.isChecked();
application.notify( label + " checked is " + chk);
}
function setClass()
{
var myTree = document.getElementById("myTree");
myTree.root.expandAll();
var nlNode = myTree.getItem("The Netherlands");
nlNode.setClass("emphasize");
}
</script>
<body>
<p>Example of the setClass method.</p>
<button onclick="setClass()">setClass NL</button>
<div cordysType="wcp.library.ui.Tree" id="myTree" treeData='menuData' treeSchema='MenuTreeSchema'> </div>
</body>
</html>